﻿@using CleanArchitecture.Blazor.Server.UI.Components.Fusion
@using CleanArchitecture.Blazor.Server.UI.Services.UserPreferences
@using System.Globalization
@inject LayoutService LayoutService
@inject IStringLocalizer<ThemesMenu> L

<MudDrawer Anchor="LayoutService.IsRTL ? Anchor.Start : Anchor.End"
@bind-Open="@_open"
OverlayAutoClose="true"
Elevation="1"
Variant="@DrawerVariant.Temporary">
    <MudDrawerHeader Class="align-center">
        <MudText Typo="Typo.body1">
            <b>@L["Themes"]</b>
        </MudText>
        <MudSpacer />
        <MudIconButton Color="Color.Default"
        Icon="@Icons.Material.Filled.Close"
        OnClick="@(() => _open = false)"
        Size="Size.Small" />
    </MudDrawerHeader>
    <div class="ma-6">
        <MudText Typo="Typo.body2">
            <b>@L["Mode"]</b>
        </MudText>
        <MudGrid Class="my-3"
        Spacing="2">
            <MudItem xs="4">
                <MudTooltip Duration="1000" Text="@L["Switch to system"]">
                    <MudButton Class="mode-button"
                    FullWidth="true"
                    OnClick="@(() => ToggleDarkLightMode(DarkLightMode.System))"
                    Style="background: white;">
                        <ChildContent>
                            <MudIcon Color="Color.Primary"
                            Icon="@Icons.Material.Filled.AutoMode" />
                        </ChildContent>
                    </MudButton>
                </MudTooltip>
            </MudItem>
            <MudItem xs="4">
                <MudTooltip Duration="1000" Text="@L["Switch to Light Theme"]">
                    <MudButton Class="mode-button"
                    FullWidth="true"
                    OnClick="@(() => ToggleDarkLightMode(DarkLightMode.Light))"
                    Style="background: white;">
                        <ChildContent>
                            <MudIcon Color="Color.Primary"
                            Icon="@Icons.Material.Filled.WbSunny" />
                        </ChildContent>
                    </MudButton>
                </MudTooltip>
            </MudItem>
            <MudItem xs="4">
                <MudTooltip Duration="1000" Text="@L["Switch to Dark Theme"]">
                    <MudButton Class="mode-button"
                    FullWidth="true"
                    OnClick="@(() => ToggleDarkLightMode(DarkLightMode.Dark))"
                    Style="background: #333333;">
                        <ChildContent>
                            <MudIcon Icon="@Icons.Material.Filled.DarkMode"
                            Style="color: #c9c9c9" />
                        </ChildContent>
                    </MudButton>
                </MudTooltip>
            </MudItem>
        </MudGrid>

        <MudText Typo="Typo.body2">
            <b>@L["Color"]</b>
        </MudText>
        <MudGrid Class="my-3"
        Spacing="2">
            @if (UserPreferences.IsDarkMode || UserPreferences.DarkLightTheme == DarkLightMode.Dark)
            {
                @foreach (var color in UserPreference.DarkPrimaryColors)
                {
                    <MudItem xs="4">
                        <MudButton Class="@(color == UserPreferences.DarkPrimaryColor ? "color-button color-button-selected" : "color-button")"
                        FullWidth="true"
                        OnClick="@(() => UpdateThemePrimaryColor(color))">
                            <ChildContent>
                                <div class="@(color == UserPreferences.DarkPrimaryColor ? "color-square color-square-selected" : "color-square")"
                                style="@($"background: {color};")">
                                    @if (color == UserPreferences.DarkPrimaryColor)
                                    {
                                        <MudIcon Size="Size.Large" Icon="@Icons.Material.Outlined.Check" Class="check-icon" />
                                    }
                                </div>
                            </ChildContent>
                        </MudButton>
                    </MudItem>
                }
            }
            else
            {
                @foreach (var color in UserPreference.PrimaryColors)
                {
                    <MudItem xs="4">
                        <MudButton Class="@(color == UserPreferences.PrimaryColor ? "color-button color-button-selected" : "color-button")"
                        FullWidth="true"
                        OnClick="@(() => UpdateThemePrimaryColor(color))">
                            <ChildContent>
                                <div class="@(color == UserPreferences.PrimaryColor ? "color-square color-square-selected" : "color-square")"
                                style="@($"background: {color};")">
                                    @if (color == UserPreferences.PrimaryColor)
                                    {
                                        <MudIcon Size="Size.Large" Icon="@Icons.Material.Outlined.Check" Class="check-icon" />
                                    }
                                </div>
                            </ChildContent>
                        </MudButton>
                    </MudItem>
                }
            }
        </MudGrid>
        <MudText Typo="Typo.body2">
            <b>@L["Border Radius"]</b>
        </MudText>
        <MudGrid Class="my-3"
        Spacing="2">
            <MudItem xs="12">
                <MudSlider Value="@UserPreferences.BorderRadius" Min="0" Max="@MaxValue" Immediate="false" Step="1" Color="Color.Primary"
                @oninput="@(e => ChangedSelection(e))">
                    @UserPreferences.BorderRadius.ToString()
                </MudSlider>
            </MudItem>
        </MudGrid>
        <MudText Typo="Typo.body2">
            <b>@L["Default Font Size"]</b>
        </MudText>
        <MudGrid Class="my-3"
        Spacing="2">
            <MudItem xs="12">
                <MudSlider Value="@UserPreferences.DefaultFontSize" Min="0.625" Max="1.125" Immediate="false" Step="0.0625" Color="Color.Primary"
                @oninput="@(e => ChangedFontSize(e))">
                    @($"{UserPreferences.DefaultFontSize.ToString()} rem")
                </MudSlider>
            </MudItem>
        </MudGrid>
        <MudText Typo="Typo.body2">
            <b>@L["Online Users"]</b>
        </MudText>
        <OnlineUsersTracker></OnlineUsersTracker>
    </div>
</MudDrawer>
<ThemesButton OnClick="@(() => _open = true)" />
<style>

    .mode-button {
    border: 1px solid var(--mud-palette-table-lines);
    height: 64px;
    }

    .color-square {
    width: 35px;
    height: 35px;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .color-square-selected {
    width: 35px;
    height: 35px;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    }


    .color-button {
    height: 60px;
    border: 1px solid var(--mud-palette-table-lines);
    transition: border 0.3s, transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
    padding: 5px;
    background-color: var(--mud-palette-surface);
    border-radius: 8px;
    }


    .color-button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }


    .color-button-selected {
    border: 2px solid var(--mud-palette-primary);
    }


    .color-button-selected:hover {
    transform: scale(1.08);
    }

    .check-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    pointer-events: none;
    }
</style>

@code
{

    private bool _open { get; set; }

    [EditorRequired][Parameter] public UserPreference UserPreferences { get; set; } = new();

    [EditorRequired][Parameter] public EventCallback<UserPreference> UserPreferencesChanged { get; set; }

    public double Radius { get; set; }

    public double MaxValue { get; set; } = 32;

    private async Task UpdateThemePrimaryColor(string color)
    {
        switch (UserPreferences.DarkLightTheme)
        {
            case DarkLightMode.Dark:
                UserPreferences.DarkPrimaryColor = color;
                break;
            case DarkLightMode.Light:
                UserPreferences.PrimaryColor = color;
                break;
            case DarkLightMode.System:
                if (UserPreferences.IsDarkMode)
                {
                    UserPreferences.DarkPrimaryColor = color;
                }
                else
                {
                    UserPreferences.PrimaryColor = color;
                }

                break;
        }

        await UserPreferencesChanged.InvokeAsync(UserPreferences);
    }

    private async Task ChangedSelection(ChangeEventArgs args)
    {
        UserPreferences.BorderRadius = double.Parse(args?.Value?.ToString() ?? "0");
        await UserPreferencesChanged.InvokeAsync(UserPreferences);
    }

    public async Task ToggleDarkLightMode(DarkLightMode mode)
    {
        UserPreferences.DarkLightTheme = mode;
        if (mode == DarkLightMode.System)
        {
            UserPreferences.IsDarkMode = true;
        }
        else if (mode == DarkLightMode.Light)
        {
            UserPreferences.IsDarkMode = false;
        }

        await UserPreferencesChanged.InvokeAsync(UserPreferences);
    }

    private async Task ChangedFontSize(ChangeEventArgs args)
    {
        UserPreferences.DefaultFontSize = double.Parse(args?.Value?.ToString() ?? "0", NumberStyles.Float, CultureInfo.InvariantCulture);
        await UserPreferencesChanged.InvokeAsync(UserPreferences);
    }

    public void OpenSetting()
    {
        _open = true;
    }
}